<template>
  <div class="app-menu">
    <app-menu-item
      v-for="(item, index) in menus"
      :key="item.value"
      :menu="item"
      :active="route.path == '/' + item.value"  
      @click="selectMenu(item, index)"
    />
  </div>
</template>

<script setup>
import config from '@/config'

import home from '@/assets/menu/home.png'
import order from '@/assets/menu/order.png'
import set from '@/assets/menu/setting.png'

import homeActive from '@/assets/menu/home-active.png'
import orderActive from '@/assets/menu/order-active.png'
import setActive from '@/assets/menu/setting-active.png'
import { inject, onMounted } from 'vue'

const route = useRoute()
const router = useRouter()
const sotre = useAppStore()
const { menuIndex, selectMenu } = toRefs(sotre)
const languageJson = inject('languageJson')
const menus = [
  { label: languageJson.value?.menus?.menu1, value: 'home', icon: home, activeIcon: homeActive },
  { label: languageJson.value?.menus?.menu2, value: 'order', icon: order, activeIcon: orderActive },
  { label: languageJson.value?.menus?.menu3, value: 'setting', icon: set, activeIcon: setActive },
]
</script>

<style lang="scss" scoped>
.app-menu {
  display: flex;
  align-items: center;
}
</style>